<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Apifox代码生成器</title>
    <style>
      body {
        width: 320px;
        padding: 10px;
        font-family: Arial, sans-serif;
      }
      h1 {
        font-size: 16px;
        margin-bottom: 10px;
      }
      .btn-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
      }
      button {
        padding: 8px;
        cursor: pointer;
        border: none;
        border-radius: 4px;
        background-color: #4285f4;
        color: white;
        font-weight: bold;
      }
      button:hover {
        background-color: #3367d6;
      }
      .status {
        margin-top: 10px;
        color: #4caf50;
        font-size: 14px;
        display: none;
      }
      hr {
        margin: 15px 0;
        border: none;
        border-top: 1px solid #ddd;
      }
      .form-container {
        display: none;
        flex-direction: column;
        gap: 10px;
      }
      .form-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }
      label {
        font-size: 13px;
      }
      input,
      select {
        padding: 6px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }
      .checkbox-group {
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .checkbox-group input {
        margin: 0;
      }
      .toggle-form {
        background: none;
        border: none;
        color: #4285f4;
        padding: 0;
        text-decoration: underline;
        cursor: pointer;
        font-size: 13px;
        text-align: center;
        margin-top: 10px;
      }
      .page-info {
        font-size: 12px;
        color: #666;
        margin-bottom: 10px;
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>Apifox代码生成器</h1>

    <div class="page-info" id="pageInfo">
      当前页面: <span id="currentPage">未检测到Apifox页面</span>
    </div>

    <div class="btn-container">
      <button id="copyMethodBtn">复制单个方法</button>
      <button id="copyClassBtn">复制完整类</button>
    </div>

    <button class="toggle-form" id="toggleForm">手动输入API信息</button>

    <div class="form-container" id="formContainer">
      <div class="form-group">
        <label for="apiName">方法名称</label>
        <input type="text" id="apiName" placeholder="例如: getBalanceLog" />
      </div>
      <div class="form-group">
        <label for="apiDesc">接口描述</label>
        <input type="text" id="apiDesc" placeholder="例如: 获取积分消费记录" />
      </div>
      <div class="form-group">
        <label for="apiPath">接口路径</label>
        <input
          type="text"
          id="apiPath"
          placeholder="例如: /api/v1/balance-log"
        />
      </div>
      <div class="form-group">
        <label for="apiMethod">HTTP方法</label>
        <select id="apiMethod">
          <option value="get">GET</option>
          <option value="post">POST</option>
          <option value="put">PUT</option>
          <option value="delete">DELETE</option>
          <option value="patch">PATCH</option>
        </select>
      </div>
      <div class="form-group checkbox-group">
        <input type="checkbox" id="hasParams" checked />
        <label for="hasParams">包含参数</label>
      </div>
      <div class="btn-container">
        <button id="copyMethodManualBtn">复制单个方法</button>
        <button id="copyClassManualBtn">复制完整类</button>
      </div>
    </div>

    <p class="status" id="status"></p>
    <script src="popup.js"></script>
  </body>
</html>
